<template>
    <van-popup class="modal-white" v-model:show="show" teleport="body" position="bottom" style="height:4.94rem" @closed="close" round>
        <div class="container">
            <div>
                <div class="modal-header">
                    <div class="title">{{$t('Withdraw To')}} {{type}}</div>
                    <div class="close" @click="close"></div>
                </div>
                <div class="modal-container" :style="{paddingBottom:vueState.pageStyle.tabBarHeight + 'px'}">
                    <yowin-input class="input" v-model:input="field.name.model" v-model:state="field.name.state" :placeholder="$t('Beneficiary')" :valid="validName" :clear="true"></yowin-input>
                    <yowin-input class="input" v-model:input="field.email.model" v-model:state="field.email.state" :placeholder="$t('Please enter your E-mail')" :valid="validEmail" :successInfo="$t(emailSuccessInfo)" :errorInfo="$t(emailErrorInfo)" :clear="true"></yowin-input>
                    <div class="input-group">
                        <div class="header">+{{vueState.countryInfo.areaCode}}</div>
                        <yowin-input v-model:input="field.phone.model" v-model:state="field.phone.state" :placeholder="$t(`Phone Number`)" :valid="validPhoneNumber" :successInfo="$t(numberSuccessInfo)" :errorInfo="$t(numberErrorInfo)" :clear="true"></yowin-input>
                    </div>
                    <yowin-select class="select" v-model:value="accountType" :placeHolder="$t('Choose Account CardType')" :options="selectOptions"></yowin-select>
                    <div v-if="accountType" class="input-group">
                        <div v-if="accountType === 'Mobile'" class="header">+55</div>
                        <yowin-input v-model:input="field.account.model" v-model:state="field.account.state" :placeholder="$t(`Please enter your ${accountType}`)" :valid="accountValid" :clear="true"></yowin-input>
                    </div>
                    <div class="input-group">
                        <div class="header">CPF</div>
                        <yowin-input v-model:input="field.documentId.model" v-model:state="field.documentId.state" :placeholder="$t(`Please enter your DocumentId`)" :valid="validName" :clear="true"></yowin-input>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div :class="['button',{unactive:!status}]" @click="submit">{{$t('Confirm')}}</div>
            </div>
        </div>
    </van-popup>
</template>
<script>
import { reactive, toRefs,computed, inject, ref, watch, getCurrentInstance } from 'vue'
import {validEmail} from '@@/utils/common.js'
import YowinInput from '../Input/index.vue'
import YowinSelect from '../Select/index.vue'
import { Toast } from 'vant'


export default {
    components:{
        YowinInput,
        YowinSelect
    },
    props:['show','height','type'],
    setup(props,ctx) {
        const {proxy} = getCurrentInstance()
        const vueState = inject('vueState')
        const accountType = ref('')
        const state = reactive({
            numberSuccessInfo:'Success! Number is available!',
            numberErrorInfo:'Error! Number is not available!',
            emailSuccessInfo:'Success! Email is available!',
            emailErrorInfo:'Error! Email is not available!',
            selectOptions:[
                {
                    name:'E-mail',
                    value:'E-mail'
                },
                {
                    name:'Mobile',
                    value:'Mobile'
                }
            ],
            field:{
                name:{
                    model:'',
                    state:false
                },
                email:{
                    model:'',
                    state:false
                },
                account:{
                    model:'',
                    state:false
                },
                documentId:{
                    model:'',
                    state:false
                },
                phone:{
                    model:vueState.pageInfo.mobile,
                    state:false
                },
            },
        })
        const accountValid = computed(()=>{
            if(accountType.value === 'Mobile'){
                return validPhone
            }else{
                return validEmail
            }
        })
        watch(accountType,()=>{
            state.field.account.model = ''
        })
        const status = computed(()=>{
            let flag = true
            for(let key in state.field){
                flag = flag && state.field[key].state
            }
            return flag
        })
        const account = computed(()=>{
            if(accountType.value === 'Mobile'){
                return `55${state.field.account.model}`
            }else{
                return state.field.account.model
            }
        })
        const close = ()=>{
            ctx.emit('update:show',false)
        }
        const submit = ()=> {
            if(status.value){
                ctx.emit('submit',state.field,account.value)
            }else{
                Toast(proxy.$t('Please complete'))
            }
        }
        const validPhone = (val)=> {
            const reg = /^[1-9]{2}[2-9]{1}[0-9]{3,4}[0-9]{4}$/
            return reg.test(val)
        }
        const validPhoneNumber = (val)=> {
            const reg = vueState.countryInfo.country === 'BR' ? /^\d{11}$/ : /^\d{10}$/
            return reg.test(val)
        }
        const validName = (val)=> {
            return Boolean(val)
        }
        return {
            ...toRefs(state),
            close,
            submit,
            validName,
            vueState,
            status,
            accountType,
            accountValid,
            validEmail,
            validPhoneNumber
        }
    }
}
</script>
<style lang="less" scoped>
.container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.modal{
    &-header{
        padding:.16rem .16rem .04rem .2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title{
            font-size: .16rem;
            font-weight: 500;
            color: black;
            line-height: .28rem;
        }
        .close{
            height: .24rem;
            width: .24rem;
            background: url(../../assets/images/Modal/modal_close_green.png) no-repeat center;
            background-size: contain;
        }
    }
    &-container{
        padding: .2rem .24rem 0;
        // height: calc(100% - .48rem);
        .input-group{
            margin-top: .24rem;
            display: flex;
            align-items: flex-start;
            // .aic();
            .header{
                margin-right: .08rem;
                height:.44rem;
                width:.68rem;
                background-color:#E0E5F2;
                border-radius: .1rem;
                .fc();
                font-size: .16rem;
                font-weight: bold;
                color:#1B2559;
            }
        }
        .input{
            margin-top: .24rem;
            &:first-child{
                margin-top: 0
            }
        }
        .select{
            margin-top: .24rem
        }
        
    }
    &-footer{
        // margin-top: .98rem;
        padding: 0 .24rem .32rem;
        .button{
            .unique-button();
            width: 100%;
            height: .46rem;
            font-size: .16rem;
            &.unactive{
                opacity: .5;
            }
        }
    }
}
</style>